import React, { useState, useEffect } from 'react';
import { Star, AlertCircle, ChevronDown } from 'lucide-react';
import { accountApi } from '../api';
import type { HeyGenAccount } from '../api/types';

const ActiveAccount: React.FC = () => {
  const [activeAccount, setActiveAccount] = useState<HeyGenAccount | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadActiveAccount();
  }, []);

  const loadActiveAccount = async () => {
    try {
      const accountData = await accountApi.getActive();

      setActiveAccount(accountData);
    } catch (error) {
      console.error('Failed to load active account:', error);
      setActiveAccount(null);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center space-x-2 px-3 py-2 bg-gray-800 rounded-lg">
        <div className="w-2 h-2 bg-gray-500 rounded-full animate-pulse"></div>
        <span className="text-sm text-gray-400">加载中...</span>
      </div>
    );
  }

  if (!activeAccount) {
    return (
      <div className="flex items-center space-x-2 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg">
        <AlertCircle className="w-4 h-4 text-red-400" />
        <span className="text-sm text-red-400">无活跃AI服务</span>
      </div>
    );
  }

  return (
    <div className="flex items-center space-x-3 px-3 py-2 bg-cyan-500/10 border border-cyan-500/20 rounded-lg">
      <Star className="w-4 h-4 text-cyan-400 fill-current" />
      <div className="flex-1 min-w-0">
        <div className="text-sm font-medium text-cyan-400 truncate">{activeAccount.name}</div>
        {activeAccount.remaining_quota && (
          <div className="text-xs text-gray-400">{activeAccount.remaining_quota} 秒</div>
        )}
      </div>
      <ChevronDown className="w-4 h-4 text-gray-500" />
    </div>
  );
};

export default ActiveAccount;
